<template>
  <el-upload
    :class="['upload-attachment', disabled ? 'disabled' : '']"
    action="/api/blade-resource/oss/endpoint/put-file-attach"
    :headers="headersObj"
    :show-file-list="false"
    :on-success="uploadSuccess"
  >
    <el-button class="el-button--mini" size="mini" type="primary">附件上传</el-button>
  </el-upload>
</template>

<script>
import { mapState } from 'vuex';
import website from '@/config/website';
import { Base64 } from 'js-base64';
import { getToken } from '@/util/auth';
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    tdStyle: {},
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      cellInfo: (state) => state.form.cellInfo,
      dataJson: (state) => state.form.dataJson,
      apiJson: (state) => state.form.apiJson,
      submitJson: (state) => state.form.submitJson,
      dictJson: (state) => state.form.dictJson,
      histroyData: (state) => state.form.histroyData,
      histroyIndex: (state) => state.form.histroyIndex,
      baseTableConfig: (state) => state.form.baseTableConfig,
      boxAreaXY: (state) => state.form.boxAreaXY,
      xAxisNum: (state) => state.form.xAxisNum,
      yAxisNum: (state) => state.form.yAxisNum
    }),
    headersObj() {
      let header = { Authorization: `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}` };
      header['Blade-Auth'] = 'bearer ' + getToken();
      return header;
    }
  },
  methods: {
    uploadSuccess(res, file, fileList) {
      if (res.code == 200) {
        let data = res.data;
        this.$emit('uploadAttach', {
          y: this.y,
          x: this.x,
          data: [data]
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.upload-attachment {
  &.disabled {
    pointer-events: none;
  }
}
</style>
